<template>
  <div class="addPlayer">
    <div class="pageHeader">
      添加打球人
      <img src="@/static/images/arrow-left.png" alt="" @click="back">
    </div>

    <!-- <h1 class="h1Top">文字描述</h1> -->
    <van-field label="姓名" placeholder="请输入姓名" v-model="newPlayer.name" />
    <van-field label="手机" placeholder="请输入手机" v-model="newPlayer.telphone" />

    <div class="addButton" @click="addPlayer">添加</div>

    <!-- :disabled="item.always_check==1?true:false" -->
    <van-checkbox class="playerCheck"  :name="item.name" v-model="item.check" v-for="(item,index) in ballPlayer" :key="index">
      <p class="playerName">{{ item.name }}</p>
      <p class="playerTel">{{ item.telphone }}</p>
    </van-checkbox>

    <div class="submitButton" @click="playerSubmit">
      确认添加
    </div>
  </div>
</template>

<style scoped>
  .addPlayer {
    background: #f5f5f5;
    min-height: calc(100vh - 40px);
    padding-bottom: 40px;
  }

  .h1Top {
    text-align: left;
    color:#1989fa;
    padding: 10px 20px;
    font-size: 24px;
  }

  .playerCheck {
    padding: 10px 20px;
    margin-bottom: 20px;
    background: #ffffff;
  }

  .playerCheck p {
    text-align: left;
  }

  .playerCheck .playerName {
    font-size: .4rem;
  }

  .addButton , .submitButton {
    width: 200px;
    height: 64px;
    line-height: 64px;
    border-radius: 32px;
    background: #1989fa;
    color: #ffffff;
    margin: 30px auto 40px;
    text-align: center;
  }
</style>

<script>
import Vue from 'vue';
import { Checkbox , Field, Toast } from 'vant';

Vue.use(Checkbox);
Vue.use(Field);

export default {
  data() {
    return {
      newPlayer: {
        name: '',
        telphone: '',
        check: true 
      },
    }
  },
  methods: {
    back(){
      this.$router.go(-1);//返回上一层
    },
    addPlayer() {
      if(this.checkNewPlayer()){
        this.ballPlayer.push(JSON.parse(JSON.stringify(this.newPlayer)));
        this.newPlayer.name = '';
        this.newPlayer.telphone = '';
      }
    },
    checkNewPlayer(){
      if(this.newPlayer.name == ""){
        Toast.fail('姓名不能为空')
        return false
      }else if(!(/^1[34578]\d{9}$/.test(this.newPlayer.telphone))){
        Toast.fail('手机格式错误')
        return false
      }else{
        return true
      }
    },
    playerSubmit() {
      // let ballPlayer = this.ballPlayer.filter(e=>e.check == 1)
      let ballPlayer = this.ballPlayer
      let loop = 0
      for(let i of ballPlayer){
        if(i.check){
          loop++
        }
      }
      if(loop > 0){
        this.$store.commit("yuding/reloadPlayer",ballPlayer)
        this.back()
      }else{
        Toast.fail("未选择打球人")
      }
    }
  },
  computed:{
    ballPlayer(){
      return this.$store.state.yuding.player
    },
  }
}
</script>